<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">企业成长性</span>
          <div>
            <button class="common_header_btn" @click="add">添加</button>
            <button class="common_header_btn" @click="batchDel">批量删除</button>
          </div>
        </div>

        <table class="common_table" cellspacing="0" cellpadding="0">
          <thead>
          <tr>
            <th><input type="checkbox" v-model='checked' @click='checkedAll'></th>
            <th>年度</th>
            <th>销售收入(元)</th>
            <th>年末资产(元)</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item ,index) in list" :key="index">
            <td><input type="checkbox" v-model='checkList' :value='item.id'></td>
            <td><span>{{item.year}}</span></td>
            <td><span>{{item.sale_money}}</span></td>
            <td><span>{{item.total_money}}</span></td>
            <td class="operation_td">
              <span class="common_table_editBTN" @click="edit(item.id)">编辑</span>
              <span class="common_table_delBTN" @click="del(item.id)">删除</span>
            </td>
          </tr>
          </tbody>
        </table>

        <!--分页-->
        <ul class="pagination" >
          <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
          <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
          </li>
          <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>
        <!--文字弹框 -->
        <div class="tankuang_box" v-if="tankuangISshow">
          <div class="tankuang">
            <p class="tankuangMSG">{{tankuangMSG}}</p>
            <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
          </div>
        </div>

        <!--添加的弹框-->
        <div class="tankuang_box" v-if="boxISshow">
          <!--里面的白色盒子（需要自己设置宽高）-->
          <div class="add_tankuang">
            <!--顶部的文字和叉叉（通用）-->
            <div class="add_tankuang_header">
              <span>{{tankuang_title}}</span>
              <i class="iconfont icon-guanbi" @click="closeBox"></i>
            </div>
            <div class="add_tankuang_content">
              <div class="add_tankuang_content_box">
                <!--这里的内容是根据需要的内容加入（不通用）-->
                <ul class="common_tankuang_content">
                  <li>
                    <span>选择年度：</span>
                    <!--<input type="text" v-model="year">-->
                    <vue-datepicker-local v-model="year" format="YYYY" class="datepicker"/>
                  </li>
                  <li>
                    <span>销售收入(元)：</span>
                    <input type="text" v-model="sale_money">
                  </li>
                  <li>
                    <span>年末资产(元)：</span>
                    <input type="text" v-model="total_money">
                  </li>
                </ul>
                <p class="savehasError" v-show="savehasError">{{saveError_msg}}</p>
                <!--底部的按钮（通用）-->
                <div class="add_tankuang_btnBOX">
                  <button class="add_tankuang_btn add_tankuang_btn_first" @click="save">保存</button>
                  <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--删除确认框 -->
        <div class="tankuang_box" v-if="delISshow">
          <div class="tankuang">
            <p class="tankuangMSG">确认删除吗？</p>
            <div class="tankuang_btn_box">
              <button class="tankuang_ok_btn" @click="delBTN">确认</button>
              <button class="tankuang_ok_btn" @click="cancelDel">取消</button>
            </div>
          </div>
        </div>


        <div class="common_header" id="zengzhanglv">
          <span class="common_header_tip">增长率</span>
        </div>
        <div id="growlv">
          <i class="inlineBlockIcon left" @click="left"></i>
          <ul>
            <li>
              <span class="topText">年度(年)</span>
              <div class="yuan">
                <span class="yuanText">{{years}}</span>
              </div>
            </li>
            <li>
              <span class="topText">净资产增长率</span>
              <div class="yuan">
                <span class="yuanText">{{sale_grow}}</span>
              </div>
            </li>
            <li>
              <span class="topText">销售收入增长率</span>
              <div class="yuan">
                <span class="yuanText">{{total_grow}}</span>
              </div>
            </li>
          </ul>
          <i class="inlineBlockIcon right" @click="right"></i>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import VueDatepickerLocal from 'vue-datepicker-local'
  import { Toast } from 'mint-ui';
  export default {
    name: 'businessGrowth',
    components: {
      Routers,
      Header,
      VueDatepickerLocal
    },
    data () {
      return {
        id:'',
        list:[],
        year_list:[],
        year:'',
        sale_money:'',
        total_money:'',
        saveError_msg:'',

        currentYear:0,
        years:0,
        sale_grow:0,
        total_grow:0,
        /*控制*/
        boxISshow:false,
        delISshow:false,
        tankuangISshow:false,
        savehasError:false,

        /****全选单选反选****/
        checked:false,
        checkList:[],
        /***删除***/
        del_list:[],
        /****分页****/
        current:1,
        showItem:5,
        allpage:1
        /***********/
      }
    },
    computed:{
      pages:function(){
        let pag = [];
        if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
          //总页数和要显示的条数那个大就显示多少条
          let i = Math.min(this.showItem,this.allpage);
          while(i){
            pag.unshift(i--);
          }
        }else{ //当前页数大于显示页数了
          let middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
            i = this.showItem;
          if( middle >  (this.allpage - this.showItem)  ){
            middle = (this.allpage - this.showItem) + 1
          }
          while(i--){
            pag.push( middle++ );
          }
        }
        return pag
      }
    },
    watch: {//深度 watcher
      'checkList': {
        handler: function(val, oldVal) {
          if (val.length === this.list.length) {
            this.checked = true;
          } else {
            this.checked = false;
          }
        },
        deep: true
      }
    },
    created: function(){
      let year = new Date().getFullYear()
      this.currentYear = year
    },
    mounted: function() {
      this.axios.get('/index/growup_list?page=1').then((res)=>{
        if(res.data.code==1){
          this.list = res.data.data
          this.allpage = res.data.last_page
        }else{
          this.list = []
        }
      })
      let year = new Date().getFullYear()
      this.years = year
      this.axios.get('/index/cal_grow?year='+year).then((res)=>{
        if(res.data.code==1){
          this.sale_grow = (res.data.sale_grow)*100+'%'
          this.total_grow = res.data.total_grow*100+'%'
        }
      })
      for(let i = year; i>=year-10; i--){
        this.year_list.push(i)
      }
    },
    methods: {
      /*分页*/
      goto (index) {
        this.current = index;
        //这里可以发送ajax请求
        this.axios.get('/index/growup_list?page='+this.current).then((res)=>{
          if(res.data.code==1){
            this.list = res.data.data
            this.allpage = res.data.last_page
          }else{
            this.list = []
          }
        })
      },
      /***全选*****/
      checkedAll () {
        let _this = this;
        if (!this.checked) {//实现全选
          _this.checkList = [];
          _this.list.forEach(function(item) {
            _this.checkList.push(item.id);
          });
        }else{//实现反选
          _this.checkList = [];
        }
      },
      /*删除*/
      del (id) {
        this.del_list = []
        this.del_list.push(id)
        this.delISshow = !this.delISshow
      },
      batchDel () {
        if(this.checkList.length<=0){
          this.tankuangMSG = '没有选择任何内容'
          this.tankuangISshow = !this.tankuangISshow
        }else{
          this.delISshow = !this.delISshow
        }
      },
      delBTN () {
        if(this.del_list.length>0){
          this.axios.post('/index/del_growup',{
            ids:JSON.stringify(this.del_list)
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.del_list = []
              this.axios.get('/index/growup_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.list = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  this.list = []
                }
              })
            }else{
              Toast(res.data.msg)
              return
            }
          })
        }else{
          this.axios.post('/index/del_growup',{
            ids:JSON.stringify(this.checkList)
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.checkList = []
              this.checked = false
              this.axios.get('/index/growup_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.list = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  this.list = []
                }
              })
            }else{
              Toast(res.data.msg)
              return
            }
          })
        }
      },
      /*基础操作*/
      add () {
        this.boxISshow = true
        this.tankuang_title = '添加'
      },
      edit (id) {
        this.tankuang_title = '编辑'
        this.axios.get('/index/show_growup?id='+id).then((res)=>{
          if(res.data.code==1){
            let datas = res.data.data
            this.year = String(datas.year)
            this.sale_money = datas.sale_money
            this.total_money = datas.total_money
            this.id = id
            this.boxISshow = true
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      save () {
        if(!this.year||!this.sale_money||!this.total_money){
          Toast('内容必须填写完整！！')
          return
        }
        let index = new Date(this.year).toLocaleDateString().indexOf('/')
        this.year = new Date(this.year).toLocaleDateString().replace(/\//ig,"-").slice(0,index)
        this.savehasError = false
        this.axios.post('/index/save_growup',{
          id:this.id||'',
          year:this.year,
          sale_money:this.sale_money,
          total_money:this.total_money
        }).then((res)=>{
          if(res.data.code==1){
            this.axios.get('/index/growup_list?page=1').then((res)=>{
              if(res.data.code==1){
                this.list = res.data.data
                this.allpage = res.data.last_page
              }else{
                this.list = []
              }
            })
            this.boxISshow = false
            this.year = ''
            this.sale_money = ''
            this.total_money = ''
            this.id = null
          }else{
            this.savehasError = true
            this.saveError_msg = res.data.msg
          }
        })
      },
      cancelSave () {
        this.boxISshow = !this.boxISshow
        this.savehasError = false
        this.year = ''
        this.sale_money = ''
        this.total_money = ''
        this.id = null
      },
      closeBox () {
        this.savehasError = false
        this.boxISshow = !this.boxISshow
        this.year = ''
        this.sale_money = ''
        this.total_money = ''
        this.id = null
      },
      cancelDel () {
        this.delISshow = !this.delISshow
      },
      tankuangISshowBTN(){
        this.tankuangISshow = false
      },
      /*增长率*/
      left () {
        let year = Number(this.years)-1
        let currentYear = this.currentYear
        if(year<Number(currentYear-3)) return
        this.years = year
        this.axios.get('/index/cal_grow?year='+year).then((res)=>{
          if(res.data.code==1){
            this.sale_grow = ((res.data.sale_grow)*100).toFixed(2)+'%'
            this.total_grow = (res.data.total_grow*100).toFixed(2)+'%'
          }else{
            this.sale_grow = 0
            this.total_grow = 0
          }
        })
      },
      right () {
        let year = Number(this.years)+1
        let currentYear = this.currentYear
        if(year>Number(currentYear+3)) return
        this.years = year
        this.axios.get('/index/cal_grow?year='+year).then((res)=>{
          if(res.data.code==1){
            this.sale_grow = ((res.data.sale_grow)*100).toFixed(2)+'%'
            this.total_grow = (res.data.total_grow*100).toFixed(2)+'%'
          }else{
            this.sale_grow = 0
            this.total_grow = 0
          }
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  .datepicker{
    width:180px;
  }
  .add_tankuang{
    width:400px;
    height:396px;
  }
  .common_tankuang_content{
    padding:40px 20px 0 20px;
    /*display: block;*/
  }
  .common_tankuang_content>li{
    /*flex:1;*/
    width:100%;
  }
  .common_tankuang_content input{
    width:180px!important;
  }
  .common_tankuang_content select{
    width:180px!important;
  }
  .common_tankuang_content span{
    width:120px;
  }
  .tankuang{
    width:300px;
    height:157px;
    padding:30px;
  }
  .tankuang_ok_btn{
    padding:6px 15px;
    font-size:16px;
    width:110px;
  }
  .savehasError{
    text-align: center;
    color: #ff0000;
    font-size:14px;
    margin-bottom: 10px;
  }
  /*zengzhanglv*/
  #zengzhanglv{
    margin-top:50px;
  }
  .yuan{
    width:99px;
    height:99px;
    background-image: url("img/yuan.png");
    text-align: center;
    /*display: inline-block;*/
    margin: 30px auto 0;
  }
  .left{
    width:39px;
    height:45px;
    background-image: url("img/left.png");
    cursor: pointer;
  }
  .right{
    width:39px;
    height:45px;
    background-image: url("img/right.png");
    cursor: pointer;
  }
  #growlv{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:900px;
    margin:90px auto 0;
  }
  #growlv>ul{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  #growlv>ul>li{
    text-align: center;
  }
  .topText{
    color: #333;
    font-size:19px;
  }
  .yuanText{
    color: #7bd0fa;
    font-size:24px;
    line-height: 99px;
  }

</style>
